<template>
  <div class="com-container">
      <!-- 题目 -->
      <h3 class="title">{{newsInfo.title}}</h3>
      <p><span class="com-time">发表时间:{{newsInfo.add_time | dateFormat}}</span><span class="com-click">点击次数:{{newsInfo.click}}次</span></p>
      <hr>
       <!-- 内容 -->
       <div id="content" v-html="newsInfo.content"></div>
       <!-- 评论 -->
       <com></com>


  </div>
</template>

<script>
//导入子组件
import { Toast } from 'mint-ui';
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return{
            newsInfo:{},
            id: this.$route.params.id

        }
    },
    created(){
        this.getNewsInfo()

    },
    methods:{
        getNewsInfo(){
            this.$http.get('http://www.liulongbin.top:3005/api/getnew/'+this.id).then(res=>{
                if(res.body.status === 0)
                {
                    this.newsInfo = res.body.message[0]////后台数据中message数据讲就是一个数组，同时在传参的时候是用的对应的参数进行数据的获取所以此时Message中只有一条数组此时只需要用message[0]即可获得对应的数据

                }else{
                    Toast('新闻获取失败')
                }
            })
        }
    },
    //注册
    components:{
        "com": comment
    }

}
</script>

<style scoped>
.com-container{
    margin:0 4px; 
}
.title{
    margin: 15px 0;
    text-align: center;
    font-size: 16px;
    color:#26a2ff;
}
p{
    display: flex;
    justify-content: space-between;
}
span{
    font-size: 13px;
    color: #8f8f94;
}



</style>>
